import React, {useState} from 'react';
// 1. 引入js文件
import Theme from '@/components/15- 常用Hooks/07- useContext/userContext.js';
import FunUseContextOne from '@/components/15- 常用Hooks/07- useContext/FunUseContextOne';

const {ThemeContext} = Theme;
const App = () => {
    /**
     * useContext：
     *      用于跨组件层级传递数据的 Hook
     * 适用场景:
     *      1. 全局状态管理 避免多层组件传递 props
     * 性能问题:
     *      1. 当 Context 的值发生变化时，所有使用 useContext 的组件都会重新渲染。如果 Context 的值是一个复杂对象，建议使用 useMemo 或 useReducer 来优化。
     * 默认值:
     *      1. 如果组件没有匹配到 Provider，useContext 会返回 createContext 时的默认值。defaultValue
     **/
    let [num, setNum] = useState(0);
    return (
        // 2. 使用Provider包裹组件 value为传递的数据
        <ThemeContext.Provider value={{num, setNum}}>
            <div>
                <h3>根组件</h3>
                <div>num ==> {num}</div>
            </div>
            <FunUseContextOne></FunUseContextOne>
        </ThemeContext.Provider>
    );
};

export default App;